<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>监控中心 - 仓库管理</title>

    <!-- Bootstrap Core CSS -->
    <link href="${request.getContextPath()}/public/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${request.getContextPath()}/public/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${request.getContextPath()}/public/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!--嵌入头部跟菜单-->
        <#include "/admin/inc/menu.html"/>

        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-10">
                        <h4 class="page-header">新增仓库</h4>
                    </div>
                </div>
        <!-- /.row -->
                <div class="row">
                    <div class="col-lg-1"></div>
                    <div class="col-lg-6">
                        <form id="myform" role="form" method="post" action="${request.getContextPath()}/admin/warehouse/submitAdd.do" onsubmit="return checkFormValue(this)">

                            <div class="form-group">
                                <label>仓库类型</label>
                                <select class="form-control" name="type" id="">
                                    <option value="0">合作仓库</option>
                                    <option value="1">第三方监控仓库</option>
                                    <option value="2">厂库</option>
                                    <option value="3">废旧电池回收点</option>
                                </select>
                            </div>


                            <div class="form-group">
                                <label>仓库名称</label>
                                <input class="form-control" name="name" type="text" required autofocus>
                            </div>


                            <div class="form-group">
                                <label>仓库地址</label>
                                <input class="form-control" name="address" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>联系人姓名</label>
                                <input class="form-control" name="contacts" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>联系人电话</label>
                                <input class="form-control" name="contactsPhone" type="tel" required>
                            </div>

                            <div class="form-group">
                                <label>维度</label>
                                <input class="form-control" name="lat" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>经度</label>
                                <input class="form-control" name="lng" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>仓库简介</label>
                                <textarea name="summary" class="form-control" rows="3"></textarea>
                            </div>


                            <div class="form-group">
                                <label>仓库详情</label>
                                <textarea name="details" class="form-control" rows="6"></textarea>
                            </div>


                            <div class="form-group">
                                <label>仓库封面图片</label>
                                <button class="btn btn-default" onclick="$('#upload_file').click();">上传封面图</button>
                                <img id="cover_img" class="img-responsive" src="">
                            </div>

                            <input id="hidden_coverImageUrl" type="hidden" name="imageUrlForList" value="">

                            <input type="hidden" id="input_images" name="imageList">

                            <button type="submit" class="btn btn-primary">提交</button>
                            <a href="${request.getContextPath()}/admin/warehouse/list.do" class="btn btn-warning " id="reset">取消</a>
                        </form>
                    </div>

                    <div class="col-lg-1"></div>

                    <!--大图区域-->
                    <div class="col-lg-3">

                        <div  id="div-images"></div>

                        <div class="panel panel-default">
                            <div class="panel-body">
                                <a href="#"> <img id="cover_img_2" width="200px" height="200px" class="img-responsive"
                                                  src="${request.getContextPath()}/public/images/image-upload.jpg"></a>
                            </div>
                            <div class="panel-footer">
                                <div class="row">
                                    <div class="col-lg-10">
                                        <!--<input type="file" name="file" id="file_image" onchange="imageUpload();">-->
                                        <a class="btn btn-primary " onclick="$('#upload_image').click();">上传图片</a>

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                </div>
        <!-- /.row -->
                
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->


    <!--图片上传表单-->
    <form id="form-upload" method="post" action="#" enctype="multipart/form-data" style="display: none">
        <input type="file" name="upload_file" id="upload_file" onchange="submitUploadFile(this);">
    </form>


    <form id="form-image-upload" method="post" action="#" enctype="multipart/form-data" style="display: none">
        <input type="file" name="upload_file" id="upload_image" onchange="imageUpload(this);">
    </form>



    <!-- jQuery -->
    <script src="${request.getContextPath()}/public/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${request.getContextPath()}/public/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${request.getContextPath()}/public/dist/js/sb-admin-2.js"></script>

    <script src="${request.getContextPath()}/public/js/ajaxfileupload.js"></script>


    <script>

        function checkFormValue(form){

            //获取所有图片
            if($(".img-new").length==0){

                alert("请上传仓库图片");

                return false;
            }


            var allImages = "";

            for(var i=0; i<$(".img-new").length;i++){

                var img = $(".img-new")[i].src;
                allImages = allImages + img +";";
            }


            $("#input_images").val(allImages);


            //post 提交表单
            $.post(form.action,$("#myform").serialize(),function(result){

                alert(result.msg);

                form.reset();

            },"json");

            return false;
        }

        //图片上传
        function submitUploadFile(dom){

            var filePath = dom.value;

            if(filePath=="") return;

            //ajax 提交
            $.ajaxFileUpload({
                url :"${request.getContextPath()}/admin/upload/uploadFiles.do", // 需要链接到服务器地址
                secureuri : false,
                fileElementId : "upload_file", // 文件选择框的id属性
                dataType : 'json', // 服务器返回的格式，可以是json
                success : function(data,status)
                {
                    var dd = eval('('+data+')');
                    var code =  dd.code;
                    var msg = dd.msg;
                    if(code==1){

                        var imageUrl = dd.data;

                        //显示封面图
                        $("#cover_img").hide().attr('src', imageUrl+'?' + Math.floor(Math.random()*100) ).fadeIn();
                        event.cancelBubble=true;

                        //设置表单内容
                        $("#hidden_coverImageUrl").val(imageUrl);

                    }else{

                        alert(msg);
                    }
                },
                error : function(data, status, e)
                {
                    alert(e);
                }
            });
        }


        var imageIndex = 0;


        //大图 上传
        function imageUpload(dom){

            var filePath = dom.value;

            if(filePath=="") return;

            $.ajaxFileUpload({
                url: '${request.getContextPath()}/admin/upload/uploadFiles.do', //用于文件上传的服务器端请求地址
                secureuri : false,
                fileElementId: 'upload_image', //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (result, status)  //服务器成功响应处理函数
                {
                    result = eval('('+result+')');

                    var img = result.data +'?' + Math.floor(Math.random()*100);

                    console.log(img);

                    //显示新上传的图片
                    var html = "<div class='panel panel-default' id='div-image-"+imageIndex+"'>\n" +
                        "\t<div class='panel-body'>\n" +
                        "\t\t<a href='#'> <img width='200px' height='200px' class='img-responsive img-new' src='"+img+"'></a>\n" +
                        "\t</div>\n" +
                        "\t<div class='panel-footer'>\n" +
                        "\t\t<div class='row'>\n" +
                        "\t\t\t<div class='col-lg-10'>\n" +
                        "\t\t\t\t<button type='button' class='btn btn-default' onclick='removeImage("+ imageIndex +")'>删除图片</button>\n" +
                        "\t\t\t</div>\n" +
                        "\t\t</div>\n" +
                        "\t</div>\n" +
                        "</div>";

                    $("#div-images").append(html);

                    imageIndex ++;

                },
                error: function (result, status, e)//服务器响应失败处理函数
                {
                    console.log(e);
                }
            });
            return false;
        }
        
        
        //删除已上传的图片
        function removeImage( index) {

            $("#div-image-"+index).remove();
            
        }


    </script>



</body>

</html>
